<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ComfyUI Gallery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="side-panel">
        <div class="panel-header">
            <h3>ComfyUI Tools</h3>
            <button class="pin-button" onclick="togglePin()" title="Pin panel">📌</button>
        </div>
        <div class="panel-content">
            <div class="view-toggle">
                <button class="panel-button toggle-button active" onclick="toggleView('image')" id="imageViewBtn">
                    <span class="button-icon">🖼️</span>
                    ImageGen
                </button>
                <button class="panel-button toggle-button" onclick="toggleView('text')" id="textViewBtn">
                    <span class="button-icon">📝</span>
                    TextGen
                </button>
                <button class="panel-button toggle-button" onclick="toggleView('llm')" id="llmViewBtn">
                    <span class="button-icon">🤖</span>
                    LLM Chat
                </button>
                <button class="panel-button toggle-button" onclick="toggleView('workflow')" id="workflowViewBtn">
                    <span class="button-icon">⚙️</span>
                    Workflow
                </button>
            </div>
            
            <div class="panel-separator"></div>

            <div id="imageViewContent" class="view-content active">
                <div class="main-buttons">
                    <button class="panel-button" onclick="openWorkflowModal()">
                        <span class="button-icon">📋</span>
                        Select Workflow
                    </button>
                    <button class="panel-button run-workflow" onclick="runSelectedWorkflow()" disabled>
                        <span class="button-icon">▶️</span>
                        Run <span id="selectedWorkflowName">No workflow selected</span>
                    </button>
                    <button class="panel-button console-button" onclick="showConsoleOptions(event)">
                        <span class="button-icon">📟</span>
                        View Console
                        <span class="button-icon dropdown-icon">▾</span>
                    </button>
                    <button class="panel-button health-check" onclick="testConnection()">
                        <span class="button-icon">🏥</span>
                        Test Connection
                    </button>
                </div>
            </div>

            <div id="textViewContent" class="view-content">
                <div class="main-buttons">
                    <div class="placeholder-message">Text Generation View</div>
                </div>
            </div>

            <div class="panel-separator"></div>
            <button class="panel-button restart-button" onclick="restartServer()">
                <span class="button-icon">🔄</span>
                Restart Server
            </button>
        </div>
    </div>

    <div class="main-content">
        <div id="serverStatus" class="server-status">
            <span class="status-dot"></span>
            <span class="status-text">Connected</span>
        </div>

        <div id="imageGalleryView" class="gallery-container active">
            <div class="title-container">
                <h1 class="title-text">
                    <span class="title-emoji">✨</span>
                    Personal image generation gallery
                    <span class="title-emoji">✨</span>
                </h1>
            </div>
            <div class="sorting-controls">
                <div class="controls-container">
                    <div class="top-controls">
                        <div class="sort-buttons">
                            <button class="btn-sort active" data-sort="date-desc" onclick="handleSortClick(this)">
                                <span class="sort-icon">🕒</span>
                                Newest
                            </button>
                            <button class="btn-sort" data-sort="name-asc" onclick="handleSortClick(this)">
                                <span class="sort-icon">📝</span>
                                Name
                            </button>
                            <button class="btn-sort" data-sort="size-desc" onclick="handleSortClick(this)">
                                <span class="sort-icon">📊</span>
                                Size
                            </button>
                            <button class="btn-sort" data-sort="type" onclick="handleSortClick(this)">
                                <span class="sort-icon">🏷️</span>
                                Type
                            </button>
                            <button id="reverseOrder" class="btn-sort btn-square" onclick="handleReverseOrder()" title="Reverse Order">
                                <span class="sort-icon">⇅</span>
                                Order
                            </button>
                        </div>
                        <div class="search-container">
                            <input type="text" 
                                   id="searchInput" 
                                   class="search-input" 
                                   placeholder="Search images..."
                                   onkeyup="handleSearch(event)">
                            <span class="search-icon">🔍</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="gallery" class="gallery">
                <div class="loading">Loading images... ⌛</div>
            </div>
        </div>

        <div id="textGalleryView" class="gallery-container">
            <div class="title-container">
                <h1 class="title-text">
                    <span class="title-emoji">📝</span>
                    Text Generation Gallery
                    <span class="title-emoji">📝</span>
                </h1>
            </div>
            <div class="sorting-controls">
                <div class="controls-container">
                    <div class="top-controls">
                        <div class="sort-buttons">
                            <button class="btn-sort active" data-sort="date-desc" onclick="handleTextSortClick(this)">
                                <span class="sort-icon">🕒</span>
                                Newest
                            </button>
                            <button class="btn-sort" data-sort="name-asc" onclick="handleTextSortClick(this)">
                                <span class="sort-icon">📝</span>
                                Name
                            </button>
                            <button class="btn-sort" data-sort="size-desc" onclick="handleTextSortClick(this)">
                                <span class="sort-icon">📊</span>
                                Size
                            </button>
                            <button id="textReverseOrder" class="btn-sort btn-square" onclick="handleTextReverseOrder()" title="Reverse Order">
                                <span class="sort-icon">⇅</span>
                                Order
                            </button>
                        </div>
                        <div class="search-container">
                            <input type="text" 
                                   id="textSearchInput" 
                                   class="search-input" 
                                   placeholder="Search text files..."
                                   onkeyup="handleTextSearch(event)">
                            <span class="search-icon">🔍</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="textGallery" class="gallery">
                <div class="loading">Loading text files... ⌛</div>
            </div>
        </div>

        <div id="llmChatView" class="gallery-container">
            <div class="title-container">
                <h1 class="title-text">
                    <span class="title-emoji">🤖</span>
                    Local LLM Chat
                    <span class="title-emoji">🤖</span>
                </h1>
            </div>
            
            <div class="chat-controls">
                <div class="controls-container">
                    <div class="model-selection">
                        <select id="modelSelect" class="model-dropdown">
                            <option value="">Loading models...</option>
                        </select>
                        <button class="refresh-models-btn" onclick="refreshModels()">
                            <span class="button-icon">🔄</span>
                            Refresh
                        </button>
                        <button class="clear-storage-btn" onclick="clearStorageAndReload()">
                            <span class="button-icon">🗑️</span>
                            Clear History
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="chat-container">
                <div id="chatMessages" class="chat-messages">
                    <div class="system-message">Select a model to start chatting</div>
                </div>
                
                <div class="chat-input-container">
                    <textarea 
                        id="chatInput" 
                        class="chat-input" 
                        placeholder="Type your message here..."
                        rows="3"
                    ></textarea>
                    <button id="sendMessage" class="send-button" disabled>
                        <span class="button-icon">📤</span>
                        Send
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal()">×</button>
            <img id="modal-img" class="modal-image" src="" alt="Full size image">
            <div class="modal-info">
                <span id="modal-filename"></span>
                <br>
                <span id="modal-date"></span>
            </div>
            <div class="modal-controls">
                <button class="modal-button" onclick="downloadImage()">Download</button>
                <button class="modal-button" onclick="deleteImage()">Delete</button>
            </div>
        </div>
        <button class="nav-button prev-button" onclick="showPrevImage()">❮</button>
        <button class="nav-button next-button" onclick="showNextImage()">❯</button>
    </div>

    <div id="deleteDialog" class="dialog-overlay">
        <div class="dialog">
            <h3 class="dialog-title">Confirm Delete</h3>
            <div class="dialog-content">
                Are you sure you want to delete this image? This action cannot be undone.
            </div>
            <div class="dialog-buttons">
                <button class="btn btn-cancel" onclick="closeDeleteDialog()">Cancel</button>
                <button class="btn btn-confirm" onclick="confirmDelete()">Delete</button>
            </div>
        </div>
    </div>

    <div id="toast" class="toast">
        <span id="toastMessage"></span>
    </div>

    <div id="fullscreenView" class="fullscreen-view">
        <div class="fullscreen-content">
            <img id="fullscreenImage" class="fullscreen-image" src="" alt="">
            <div class="fullscreen-controls">
                <button class="fullscreen-nav-button" onclick="navigateFullscreen('prev')">←</button>
                <button class="fullscreen-nav-button" onclick="navigateFullscreen('next')">→</button>
            </div>
            <button class="close-fullscreen" onclick="closeFullscreenView()">
                <span class="close-icon">×</span>
            </button>
            <div class="image-info-overlay">
                <span class="filename"></span>
                <span class="date"></span>
            </div>
        </div>
    </div>

    <div id="selectionActions" class="selection-actions">
        <button class="btn-delete-selected" onclick="deleteSelected()">
            <span class="selection-count" data-count="0"></span>
            Delete Selected
        </button>
    </div>

    <div id="contextMenu" class="context-menu">
        <div class="context-menu-item" onclick="openRenameDialog()">
            <span class="context-icon">✏️</span>
            Rename
        </div>
        <div class="context-menu-item" onclick="openInNewTab()">
            <span class="context-icon">🔍</span>
            Open in New Tab
        </div>
        <div class="context-menu-item" onclick="downloadSelected()">
            <span class="context-icon">⬇️</span>
            Download
        </div>
        <div class="context-menu-separator"></div>
        <div class="context-menu-item delete" onclick="deleteSelected()">
            <span class="context-icon">🗑️</span>
            Delete
        </div>
    </div>

    <div id="renameDialog" class="dialog">
        <div class="dialog-content">
            <h3>Rename Image</h3>
            <input type="text" id="newFilename" class="rename-input">
            <div class="dialog-buttons">
                <button onclick="closeRenameDialog()" class="dialog-button cancel">Cancel</button>
                <button onclick="confirmRename()" class="dialog-button confirm">Rename</button>
            </div>
        </div>
    </div>

    <div id="newImagesModal" class="modal new-images-modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeNewImagesModal()">×</button>
            <h3 class="modal-title">New Images</h3>
            <div class="new-images-grid">
                <!-- Images will be added here dynamically -->
            </div>
            <div class="modal-controls">
                <button class="modal-button" onclick="selectAllNew()">Select All</button>
                <button class="modal-button" onclick="downloadAllNew()">Download All</button>
                <button class="modal-button delete" onclick="deleteAllNew()">Delete All</button>
            </div>
        </div>
    </div>

    <div id="workflowModal" class="modal workflow-modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeWorkflowModal()">×</button>
            <h3 class="modal-title">Select Workflow</h3>
            
            <div class="workflow-folder-select">
                <label for="workflowFolder">Workflow Folder:</label>
                <div class="folder-select-container">
                    <select id="workflowFolder" onchange="loadWorkflowsFromFolder(this.value)">
                        <option value="">Loading folders...</option>
                    </select>
                    <button class="browse-button" onclick="openFolderBrowser()">
                        <span class="button-icon"></span>
                        Browse
                    </button>
                </div>
            </div>
            
            <div class="workflow-list">
                <!-- Workflows will be added here dynamically -->
            </div>
            
            <div class="workflow-controls">
                <div class="workflow-info">
                    <span id="selectedWorkflow">No workflow selected</span>
                </div>
            </div>
        </div>
    </div>

    <div id="consoleModal" class="modal console-modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeConsoleModal()">×</button>
            <h3 class="modal-title">Server Console</h3>
            <div class="console-container">
                <div id="consoleOutput" class="console-output"></div>
            </div>
            <div class="console-controls">
                <button class="modal-button" onclick="clearConsole()">
                    <span class="button-icon">🗑️</span>
                    Clear
                </button>
                <button class="modal-button" onclick="toggleAutoScroll()" id="autoScrollButton">
                    <span class="button-icon">📜</span>
                    Auto-scroll: ON
                </button>
            </div>
        </div>
    </div>

    <div id="folderBrowserModal" class="modal folder-browser-modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeFolderBrowser()">×</button>
            <h3 class="modal-title">Browse Folders</h3>
            
            <div class="browser-controls">
                <div class="current-path">
                    <span id="currentPath"></span>
                </div>
                <label class="show-all-toggle">
                    <input type="checkbox" id="showAllFiles" onchange="refreshBrowser()">
                    Show All Files
                </label>
            </div>
            
            <div class="folder-list">
                <!-- Items will be added here dynamically -->
            </div>
            
            <div class="folder-controls">
                <button class="modal-button cancel" onclick="closeFolderBrowser()">
                    Cancel
                </button>
                <button class="modal-button select" onclick="selectCurrentFolder()" id="selectFolderButton" disabled>
                    Select This Folder
                </button>
            </div>
        </div>
    </div>

    <div id="workflowView" class="gallery-container">
        <div class="title-container">
            <h1 class="title-text">
                <span class="title-emoji">⚙️</span>
                Workflow Parameters
                <span class="title-emoji">⚙️</span>
            </h1>
        </div>
        
        <div class="workflow-controls">
            <div class="controls-container">
                <div class="workflow-header">
                    <h2>Current Workflow: <span id="currentWorkflowName">None selected</span></h2>
                    <div class="workflow-actions">
                        <button class="workflow-button" onclick="openWorkflowModal()">
                            <span class="button-icon">📋</span>
                            Select Workflow
                        </button>
                        <button class="workflow-button run-workflow" onclick="runSelectedWorkflow()" disabled>
                            <span class="button-icon">▶️</span>
                            Run Workflow
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="workflowParameters" class="workflow-parameters">
            <div class="placeholder-message">Select a workflow to customize parameters</div>
        </div>
    </div>

    <script src="/static/js/gallery.js"></script>
</body>
</html> 